<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'

let ellipsis = ref<string>('.')
let timer: NodeJS.Timer | null = null
onMounted(() => {
	timer = setInterval(() => {
		ellipsis.value =
			ellipsis.value.length === 3 ? '.' : ellipsis.value + '.'
	}, 500)
})
onUnmounted(() => {
	clearInterval(Number(timer))
})
</script>

<template>
	<div class="loading">
		<img
			class="flipInY"
			src="@/static/loadingIcon/icecream.png"
			alt="loading"
		/>
		<div class="loading-text">登陆中{{ ellipsis }}</div>
	</div>
</template>

<style lang="scss" scoped>
.loading {
	width: 100px;
	height: 100px;

	img {
		width: 100%;
		height: 100%;
	}

	.loading-text {
		width: 120px;
		height: 140px;
		line-height: 140px;
		font-size: 25px;
		font-weight: 300;
		color: #38c3ff;
	}
}
</style>
